<!DOCTYPE html>
<html>
<head>
	<meta charset='utf-8' />
	<title>按钮</title>
	<style type="text/css">
		.btn {
			display: inline-block;
			padding: 10px;
			margin: 10px;
			font-size: 20px;
			font-weight: bold;
		}
		.btn:before {
			display: inline-block;
			content: '';
			width: 20px;
			height: 20px;
			margin-right: 5px;
			vertical-align: middle;
			background: url(./images/icon.png) -30px center no-repeat;
			background-size: cover;
		}
		.btn-one {
			color: #5F5A5A;
			background-color: #ddd;
			border-radius: 8px;
			box-shadow: 0 5px 5px #6D6666;
		}
		.btn-one:before {
			display: none;
		}
		.btn-two {
			padding: 10px 15px;
			color: #5B7CAF;
			background-color: #B5D6F1;
			border-radius: 10px / 50%;
			box-shadow: 0 5px 5px #21255A;
		}
		.btn-three {
			padding: 10px 25px;
			color: #985887;
			background-color: #F3D7E2;
			border-radius: 35px 0 / 30px 0;
			box-shadow: 0 5px 5px #6B3131;
		}
		.btn-three:before {
			background-position-x: -135px;
		}
		.btn-four {
			padding: 10px 15px;
			background-color: #BBEFC5;
			border-radius: 10px 10px 5px 5px / 30px 30px 10px 10px;
			box-shadow: 0 5px 5px #1B5018;
		}
		.btn-four:before {
			margin: 0;
			background-position-x: -55px;
		}
		.btn-five {
			padding: 10px 15px;
			background-color: #BBEFC5;
			border-radius: 8px;
			box-shadow: 0 5px 5px #1B5018;
		}
		.btn-five:before {
			background-position-x: -190px;
		}
		.btn-six {
			padding: 10px 20px;
			background-color: #F3D7E2;
			border-radius: 50% / 45%;
			box-shadow: 0 5px 5px #6B3131;
		}
		.btn-six:before {
			margin: 0;
			background-position-x: -109px;
		}
		.btn-seven {
			padding: 15px 20px;
			background-color: #EAC09D;
			border-radius: 0px 0px 100% 100% / 190%;
			box-shadow: 0 5px 5px #794D09;
		}
		.btn-seven:before {
			margin: 0;
			background-position-x: -162px;
		}
		.btn-eight {
			padding: 10px 15px;
			background-color: #B5D6F1;
			border-radius: 10px 10px 5px 5px /30px 30px 10px 10px;
			box-shadow: 0 5px 5px #21255A;
		}
		.btn-eight:before {
			margin: 0;
			background-position-x: 0px;
		}
		.btn-night {
			padding: 10px 15px;
			background-color: #EAC09D;
			border-radius: 5px 60% 5px 2px;
			box-shadow: 0 5px 5px #794D09;
		}
		.btn-night:before {
			margin: 0;
			background-position-x: -82px;
		}
	</style>
</head>
<body>
	<div class='btn btn-one'>Button</div>
	<div class='btn btn-two'>Call</div>
	<div class='btn btn-three'>Stars</div>
	<div class='btn btn-four'></div>
	<div class='btn btn-five'>Blog</div>
	<div class='btn btn-six'></div>
	<div class='btn btn-seven'></div>
	<div class='btn btn-eight'></div>
	<div class='btn btn-night'></div>
</body>
</html>